<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        .container {
            width: 450px;
            height: 450px;
            margin: 100px auto;
            border: 1px solid #ccc;
            box-sizing: border-box;
            position: relative;
        }

        .qipan {
            width: 30px;
            height: 30px;
            box-sizing: border-box;
            position: absolute;
            border: 1px solid rgb(182, 154, 154);
        }

        .qizi {
            width: 26px;
            height: 26px;
            border: 1px solid black;
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <!-- <canvas id="chess" width="450px" height="450px"></canvas>
    <script src="script.js"></script> -->
    <div id="container" class="container"></div>
    <script>
        //落子的数据,15*15
        let data = [];
        for (let i = 0; i < 15; i++) {
            data[i] = [];
            for (let j = 0; j < 15; j++) {
                data[i][j] = 0;
            }
        }
        //测试数据,1为黑子，2为白子
        // data[0][0] = 1;
        // data[0][1] = 1;
        // data[1][1] = 2;

        let container = document.getElementById("container");
        //棋盘
        for (let i = 0; i < 14; i++) {
            for (let j = 0; j < 14; j++) {
                let qipan = document.createElement("div");
                qipan.className = "qipan";
                qipan.style.left = (i * 30 + 15) + "px";
                qipan.style.top = (j * 30 + 15) + "px";
                container.appendChild(qipan);
            }
        }


        //AI算法
        //赢法数组
        let wins = [];
        for (let i = 0; i < 15; i++) {
            wins[i] = [];
            for (let j = 0; j < 15; j++) {
                wins[i][j] = [];
            }
        }
        //所有横线
        let count = 0;
        for (let i = 0; i < 15; i++) {
            for (let j = 0; j < 11; j++) {
                for (let k = 0; k < 5; k++) {
                    wins[i][j + k][count] = true;
                }
                count++;
            }
        }
        //所有竖线
        for (let i = 0; i < 15; i++) {
            for (let j = 0; j < 11; j++) {
                for (let k = 0; k < 5; k++) {
                    wins[j + k][i][count] = true;
                }
                count++;
            }
        }
        //所有斜线
        for (let i = 0; i < 11; i++) {
            for (let j = 0; j < 11; j++) {
                for (let k = 0; k < 5; k++) {
                    wins[i + k][j + k][count] = true;
                }
                count++;
            }
        }
        //所有反斜线
        for (let i = 0; i < 11; i++) {
            for (let j = 14; j > 3; j--) {
                for (let k = 0; k < 5; k++) {
                    wins[i + k][j - k][count] = true;
                }
                count++;
            }
        }
        console.log(count);
        //赢法的统计数组
        let myWin = [];
        let computerWin = [];
        for (let i = 0; i < count; i++) {
            myWin[i] = 0;
            computerWin[i] = 0;
        }


        //点击棋盘落子
        const left = container.offsetLeft;
        const up = container.offsetTop;
        let over = false;
        let color = 1;
        container.onclick = function (e) {
            if (over) {
                return;
            }
            const x = parseInt((e.pageX - left) / 30);
            const y = parseInt((e.pageY - up) / 30);
            //render();
            if (data[x][y] !== 0) {
                return;
            } else {
                data[x][y] = color;
                color = 3 - color;
            }
            render();
            //console.log(data[x][y]);
            //console.log(data);
            //computerAI();
            for (let i = 0; i < count; i++) {
                myWin[i] = 0;
                //computerWin[i] = 0;
            }

            //统计得分
            for (let i = 0; i < 15; i++) {
                for (let j = 0; j < 15; j++) {
                    if (data[i][j] === 1) {
                        for (let k = 0; k < count; k++) {
                            if (wins[i][j][k]) {
                                myWin[k]++;
                                computerWin[k] = 6;
                                //console.log(data);
                                //console.log(k, myWin[k])
                                if (myWin[k] === 5) {
                                    window.alert("你赢了！");
                                    over = true;
                                }
                            }
                        }
                    } else if (data[i][i] === 2) {
                        for (let k = 0; k < count; k++) {
                            if (wins[i][j][k]) {

                                computerWin[k]++;


                                myWin[k] = 6;
                                //console.log(data);
                                //console.log(k, myWin[k])
                            }
                        }
                    }
                }
            }
            if (!over) {
                computerAI();//找到得分最多的点，变为2
                render();
                for (let i = 0; i < count; i++) {
                    computerWin[i] = 0
                }

                for (let i = 0; i < 15; i++) {
                    for (let j = 0; j < 15; j++) {
                        if (data[i][j] === 2) {
                            for (let k = 0; k < count; k++) {
                                if (wins[i][j][k]) {
                                    computerWin[k]++;
                                    myWin[k] = 6;
                                    //console.log(data);
                                    //console.log(k, myWin[k])
                                    if (computerWin[k] === 5) {
                                        window.alert("计算机赢了！");
                                        over = true;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }





        //computerAI()算法
        function computerAI() {
            let myScore = [];
            let computerScore = [];
            let max = 0;
            let u = 0;
            let v = 0;
            let doThree = false;
            let doFour = false;
            for (let i = 0; i < 15; i++) {
                myScore[i] = [];
                computerScore[i] = [];
                for (let j = 0; j < 15; j++) {
                    myScore[i][j] = 0;
                    computerScore[i][j] = 0;
                }
            }

            for (let i = 0; i < 15; i++) {
                for (let j = 0; j < 15; j++) {
                    if (data[i][j] === 0) {
                        doFour = false;
                        for (let k = 0; k < count; k++) {
                            if (wins[i][j][k]) {
                                if (myWin[k] === 1) {
                                    myScore[i][j] += 200;
                                } else if (myWin[k] === 2) {
                                    myScore[i][j] += 400;
                                } else if (myWin[k] === 3) {
                                    myScore[i][j] += 2000;
                                } else if (myWin[k] === 4) {
                                    myScore[i][j] += 10000;
                                }
                                if (computerWin[k] === 1) {//计算机拿到这个点，同样的赢面，得分更高
                                    computerScore[i][j] += 220;
                                } else if (computerWin[k] === 2) {
                                    computerScore[i][j] += 420;
                                } else if (computerWin[k] === 3) {

                                    computerScore[i][j] += 2500;
                                } else if (computerWin[k] === 4) {
                                    doFour = ture;
                                    break;
                                    computerScore[i][j] += 20000;

                                }
                                // if (myScore[i][j] !== 0) {
                                //     console.log(myScore[i][j]);
                                // }
                                // if (computerScore[i][j]) {
                                //     console.log(computerScore[i][j])
                                // }
                            }


                        }
                        //找到防御点
                        if (myScore[i][j] > max) {
                            max = myScore[i][j];
                            u = i;
                            v = j;
                        } else if (myScore[i][j] === max) {

                            if (computerScore[i][j] > computerScore[u][v]) {
                                u = i;
                                v = j
                            }
                        }
                        //对比防御点，如果有，找到进攻点
                        // if (computerScore[i][j] > max) {
                        //     max = computerScore[i][j];
                        //     u = i;
                        //     v = j;
                        // }
                        // else if (computerScore[i][j] === max) {
                        //     if (myScore[i][j] > myScore[u][v]) {
                        //         u = i;
                        //         v = j
                        //     }
                        // }
                        console.log(u,v,max)
                    }
                }
            }
            data[u][v] = color;
            color = 3 - color;
        }

        //渲染数据到棋盘
        function render() {

            for (let i = 0; i < 15; i++) {
                for (let j = 0; j < 15; j++) {
                    if (data[i][j] !== 0) {
                        let qizi = document.createElement("div");
                        qizi.className = "qizi";
                        qizi.style.left = (i * 30 + 15 - 13) + "px";
                        qizi.style.top = (j * 30 + 15 - 13) + "px";
                        if (data[i][j] === 1) {
                            //console.log(data[i][j]);
                            qizi.style.backgroundColor = "black";


                            // if (!over) {
                            //     computerAI();
                            // }
                        } else if (data[i][j] === 2) {
                            qizi.style.backgroundColor = "white";

                            //统计得分

                        }
                        container.appendChild(qizi);
                    }

                }
            }

        }
        //render();



    </script>
</body>

</html>